<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项 - 导航菜单项目</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 待办事项专用样式 */
        .todo-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .todo-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .todo-header h3 {
            color: #2c3e50;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .todo-header p {
            color: #7f8c8d;
            font-size: 1rem;
        }

        /* 输入区域样式 */
        .todo-input-section {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            align-items: stretch;
        }

        .todo-input {
            flex: 1;
            padding: 1rem;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .todo-input:focus {
            outline: none;
            border-color: #74b9ff;
            box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.1);
        }

        .todo-input::placeholder {
            color: #bbb;
        }

        .add-btn {
            padding: 1rem 2rem;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .add-btn:hover {
            background: linear-gradient(135deg, #0984e3, #74b9ff);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
        }

        .add-btn:active {
            transform: translateY(0);
        }

        /* 待办事项列表样式 */
        .todo-list-container {
            margin-top: 2rem;
        }

        .todo-list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #f0f0f0;
        }

        .todo-list-header h4 {
            color: #2c3e50;
            font-size: 1.2rem;
            margin: 0;
        }

        .todo-count {
            background: #74b9ff;
            color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .todo-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            margin: 0.5rem 0;
            background: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #74b9ff;
            transition: all 0.3s ease;
            animation: slideIn 0.3s ease-out;
        }

        .todo-item:hover {
            background: #e3f2fd;
            transform: translateX(5px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .todo-text {
            flex: 1;
            color: #2c3e50;
            font-size: 1rem;
            line-height: 1.4;
        }

        .todo-time {
            font-size: 0.8rem;
            color: #7f8c8d;
            margin-left: 1rem;
            white-space: nowrap;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            margin-left: 1rem;
        }

        .delete-btn:hover {
            background: #c0392b;
            transform: scale(1.05);
        }

        .delete-btn:active {
            transform: scale(0.95);
        }

        /* 空状态样式 */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #7f8c8d;
        }

        .empty-state-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .empty-state h4 {
            color: #7f8c8d;
            margin-bottom: 0.5rem;
        }

        .empty-state p {
            font-size: 0.9rem;
        }

        /* 统计信息 */
        .todo-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
            padding: 1rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 1.5rem;
            font-weight: bold;
            display: block;
        }

        .stat-label {
            font-size: 0.8rem;
            opacity: 0.9;
        }

        /* 动画效果 */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100px);
            }
        }

        .todo-item.removing {
            animation: slideOut 0.3s ease-out forwards;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .todo-container {
                margin: 1rem;
                padding: 1.5rem;
            }

            .todo-input-section {
                flex-direction: column;
            }

            .add-btn {
                width: 100%;
            }

            .todo-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }

            .todo-time {
                margin-left: 0;
                align-self: flex-end;
            }

            .delete-btn {
                margin-left: 0;
                align-self: flex-end;
            }

            .todo-stats {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>待办事项管理</h1>
        </header>

        <nav class="navigation">
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="home">首页 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="home-submenu">
                        <li><a href="index.html">网站首页</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="news.html">最新消息</a></li>
                        <li><a href="todo.html">待办事项</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="products">产品中心 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="products-submenu">
                        <li><a href="products-web.html">网站开发</a></li>
                        <li><a href="products-mobile.html">移动应用</a></li>
                        <li><a href="products-design.html">UI设计</a></li>
                        <li><a href="products-seo.html">SEO优化</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="services">服务支持 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="services-submenu">
                        <li><a href="service-tech.html">技术支持</a></li>
                        <li><a href="service-training.html">培训服务</a></li>
                        <li><a href="service-maintenance.html">维护服务</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="company">公司信息 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="company-submenu">
                        <li><a href="company-profile.html">公司简介</a></li>
                        <li><a href="company-team.html">团队介绍</a></li>
                        <li><a href="company-history.html">发展历程</a></li>
                        <li><a href="company-culture.html">企业文化</a></li>
                    </ul>
                </li>
                
                <li class="nav-item">
                    <a href="#" class="nav-link" data-menu="contact">联系我们 <span class="arrow">▼</span></a>
                    <ul class="sub-menu" id="contact-submenu">
                        <li><a href="contact-info.html">联系方式</a></li>
                        <li><a href="contact-form.html">在线留言</a></li>
                        <li><a href="contact-map.html">地图位置</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <main class="main-content">
            <div class="page-content">
                <div class="todo-container">
                    <div class="todo-header">
                        <h3>📝 我的待办事项</h3>
                        <p>管理您的日常任务，保持高效工作状态</p>
                    </div>

                    <!-- 输入区域 -->
                    <div class="todo-input-section">
                        <input 
                            type="text" 
                            id="todoInput" 
                            class="todo-input" 
                            placeholder="输入新的待办事项..."
                            maxlength="100"
                        >
                        <button id="addBtn" class="add-btn">
                            ➕ 添加
                        </button>
                    </div>

                    <!-- 待办事项列表 -->
                    <div class="todo-list-container">
                        <div class="todo-list-header">
                            <h4>📋 任务列表</h4>
                            <span id="todoCount" class="todo-count">0 项任务</span>
                        </div>
                        
                        <ul id="todoList" class="todo-list">
                            <!-- 待办事项将通过JavaScript动态添加 -->
                        </ul>

                        <!-- 空状态 -->
                        <div id="emptyState" class="empty-state">
                            <div class="empty-state-icon">📭</div>
                            <h4>暂无待办事项</h4>
                            <p>添加您的第一个任务开始管理您的待办事项吧！</p>
                        </div>
                    </div>

                    <!-- 统计信息 -->
                    <div id="todoStats" class="todo-stats" style="display: none;">
                        <div class="stat-item">
                            <span id="totalTodos" class="stat-number">0</span>
                            <span class="stat-label">总任务</span>
                        </div>
                        <div class="stat-item">
                            <span id="todaysAdded" class="stat-number">0</span>
                            <span class="stat-label">今日新增</span>
                        </div>
                        <div class="stat-item">
                            <span id="completedTodos" class="stat-number">0</span>
                            <span class="stat-label">已完成</span>
                        </div>
                    </div>
                </div>
                
                <div class="back-link">
                    <a href="index.html" class="btn-back">← 返回首页</a>
                </div>
            </div>
        </main>

        <footer>
            <p>&copy; 2024 导航菜单项目. 保留所有权利.</p>
        </footer>
    </div>

    <script src="script.js"></script>
    <script>
        // 待办事项管理功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const todoInput = document.getElementById('todoInput');
            const addBtn = document.getElementById('addBtn');
            const todoList = document.getElementById('todoList');
            const todoCount = document.getElementById('todoCount');
            const emptyState = document.getElementById('emptyState');
            const todoStats = document.getElementById('todoStats');
            const totalTodos = document.getElementById('totalTodos');
            const todaysAdded = document.getElementById('todaysAdded');
            const completedTodos = document.getElementById('completedTodos');

            // 待办事项数组
            let todos = [];
            let todoIdCounter = 1;
            let todaysAddedCount = 0;
            let completedCount = 0;

            // 更新待办事项显示
            function updateTodoDisplay() {
                // 清空列表
                todoList.innerHTML = '';
                
                if (todos.length === 0) {
                    emptyState.style.display = 'block';
                    todoStats.style.display = 'none';
                    todoCount.textContent = '0 项任务';
                    return;
                }

                emptyState.style.display = 'none';
                todoStats.style.display = 'flex';

                // 创建待办事项元素
                todos.forEach(todo => {
                    const li = document.createElement('li');
                    li.className = 'todo-item';
                    li.innerHTML = `
                        <span class="todo-text">${escapeHtml(todo.text)}</span>
                        <span class="todo-time">${todo.time}</span>
                        <button class="delete-btn" onclick="deleteTodo(${todo.id})">
                            🗑️ 删除
                        </button>
                    `;
                    todoList.appendChild(li);
                });

                // 更新计数和统计
                todoCount.textContent = `${todos.length} 项任务`;
                totalTodos.textContent = todos.length;
                todaysAdded.textContent = todaysAddedCount;
                completedTodos.textContent = completedCount;
            }

            // 添加待办事项
            function addTodo() {
                const text = todoInput.value.trim();
                
                if (text === '') {
                    // 输入框获取焦点并添加提示效果
                    todoInput.focus();
                    todoInput.style.borderColor = '#e74c3c';
                    setTimeout(() => {
                        todoInput.style.borderColor = '#e0e0e0';
                    }, 1000);
                    return;
                }

                // 创建新的待办事项
                const newTodo = {
                    id: todoIdCounter++,
                    text: text,
                    time: new Date().toLocaleString('zh-CN', {
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit'
                    }),
                    completed: false
                };

                todos.push(newTodo);
                todaysAddedCount++;
                
                // 清空输入框
                todoInput.value = '';
                
                // 更新显示
                updateTodoDisplay();
                
                // 保存到本地存储
                saveTodos();

                // 成功反馈
                showSuccessMessage('任务添加成功！');
            }

            // 删除待办事项
            window.deleteTodo = function(id) {
                const todoIndex = todos.findIndex(todo => todo.id === id);
                if (todoIndex > -1) {
                    // 添加删除动画
                    const todoItem = todoList.children[todoIndex];
                    todoItem.classList.add('removing');
                    
                    setTimeout(() => {
                        todos.splice(todoIndex, 1);
                        completedCount++;
                        updateTodoDisplay();
                        saveTodos();
                        showSuccessMessage('任务已删除！');
                    }, 300);
                }
            };

            // HTML转义函数，防止XSS攻击
            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }

            // 显示成功消息
            function showSuccessMessage(message) {
                const messageEl = document.createElement('div');
                messageEl.textContent = message;
                messageEl.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #2ecc71;
                    color: white;
                    padding: 1rem 2rem;
                    border-radius: 8px;
                    z-index: 1000;
                    animation: slideIn 0.3s ease-out;
                `;
                
                document.body.appendChild(messageEl);
                
                setTimeout(() => {
                    messageEl.remove();
                }, 2000);
            }

            // 保存到本地存储
            function saveTodos() {
                localStorage.setItem('todos', JSON.stringify(todos));
                localStorage.setItem('todoStats', JSON.stringify({
                    todaysAdded: todaysAddedCount,
                    completed: completedCount,
                    lastSaveDate: new Date().toDateString()
                }));
            }

            // 从本地存储加载
            function loadTodos() {
                const savedTodos = localStorage.getItem('todos');
                const savedStats = localStorage.getItem('todoStats');
                
                if (savedTodos) {
                    todos = JSON.parse(savedTodos);
                    todoIdCounter = todos.length > 0 ? Math.max(...todos.map(t => t.id)) + 1 : 1;
                }

                if (savedStats) {
                    const stats = JSON.parse(savedStats);
                    const today = new Date().toDateString();
                    
                    if (stats.lastSaveDate === today) {
                        todaysAddedCount = stats.todaysAdded || 0;
                        completedCount = stats.completed || 0;
                    } else {
                        // 新的一天，重置今日统计
                        todaysAddedCount = 0;
                        completedCount = 0;
                    }
                }

                updateTodoDisplay();
            }

            // 事件监听器
            addBtn.addEventListener('click', addTodo);
            
            todoInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addTodo();
                }
            });

            // 输入框焦点效果
            todoInput.addEventListener('focus', function() {
                this.style.borderColor = '#74b9ff';
            });

            todoInput.addEventListener('blur', function() {
                this.style.borderColor = '#e0e0e0';
            });

            // 键盘快捷键
            document.addEventListener('keydown', function(e) {
                // Ctrl/Cmd + Enter 快速添加
                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                    todoInput.focus();
                }
                
                // ESC 清空输入框
                if (e.key === 'Escape') {
                    todoInput.value = '';
                    todoInput.blur();
                }
            });

            // 页面初始化
            loadTodos();
            
            // 页面离开时自动保存
            window.addEventListener('beforeunload', saveTodos);
        });
    </script>
</body>
</html> 